<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echars.js"></script>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/ex001.css">
</head>
<body>
    <div class="box"></div>
    <!-- <script>
        var myChar = echarts.init(document.querySelector('.box'));
        var myOption = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:[{
                    name:'销量1',
                    textStyle: {
                        color: 'green'
                    }
                },{
                    name:'销量2',
                    icon:'cycle'
                }
            ]
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
            //    data:[20, 30, 50, 70, 84]
            },
            series: [{
                name: '销量1',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 200]
            },{
                name:'销量2',
                type: 'tree',
                data: [5, 20, 36, 10, 10, 20]
            }
            ]
        }
        
        myChar.setOption(myOption);
    </script> -->
    
    <script>
        // pie
    // $(function() {
    //     var myChart = echarts.init(document.querySelector('.box'));
    //     myChart.setOption(
    //         {
    //             grid:{
    //                 left:'0%',
    //                 top:30,
    //                 right:'0%',
    //                 bottom:'10%',
    //             },
    //             tooltip: {
    //                 show: true,
    //                 trigger: 'axis',
    //             },
    //             legend: {
    //                 show:true,
    //                 itemHeight: 8,
    //                 itemWidth: 8,
    //                 position: 'bottom',
    //                 textStyle: {
    //                     fontSize: 10,
    //                     color: 'white',
    //                 },
    //                 bottom: 0,
    //             },
    //             series: [
    //                 {
    //                     name: '新增粉丝',
    //                     type: 'pie',
    //                     radius: ['10%', '60%'],
    //                     label: {
    //                         show: false,
    //                     },
    //                     data: [{
    //                         value: 89,
    //                         name: '0岁以下',
    //                     }, {
    //                         value: 40,
    //                         name: '20-29岁',
    //                     }, {
    //                         value: 80,
    //                         name: '30-39岁'
    //                     }, {
    //                         value: 120,
    //                         name: '40-49岁',
    //                     },{
    //                         value: 70,
    //                         name: '50岁以上',
    //                     }],
    //                 }
    //             ]
    //         }
    //     );
    //     window.addEventListener('resize', () => {
    //         myChart.resize();
    //     })
    // });

        $(function() {
            var chart = echarts.init(document.querySelector('.box'));
            var option = {
                // tooltip: {},
                // legend: {},
                xAxis: {
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                },
                yAxis: {},
                series: [{
                    name: "Sale",
                    type: "bar",
                    
                    data: [5, 20, 36, 10, 10, 20, 4],
                    label: {
                        rotate: 90,
                        show: true,
                        borderColor: "rgba(218, 20, 20, 1)",
                        borderWidth: 1,
                        formatter:'{c}: ({d}%)'
                    }
                }]
            }
            chart.setOption(option);
        })
    

    </script>
</body>
<script src="./js/flexible.js"></script>
</html>